<template>
	<view>
		<nav-bar :shadow="false" title="状态监测" :bgColor="'#f8f8f8'">
			<view class="u-flex icon_setUp" slot="left">
				<u-icon name="arrow-left" size="40" @click="back"></u-icon>
			</view>
			<view slot="right" class="search_box">
				<u-icon name="search" size="38" @click="toLink"></u-icon>
			</view>
		</nav-bar>
		<view class="nav u-flex" v-show="!isShowAll">
			<!-- <view class="u-flex nav-cell" :class="{ active: isScreen }" @click="screen()">
					<text class="ellipsis nav_text">对象类型</text>
					<image v-if="!isScreen" class="nav_icon_down" src="/static/icon/ic_down.png"></image>
					<image v-if="isScreen" class="nav_icon_down rotate" src="/static/icon/ic_down.png"></image>
				</view> -->
			<view class="u-flex nav-cell" :class="{ active: isShowSlot }" @click="showSlot()">
				<text class="ellipsis nav_text" v-if="screenIndex">{{ screenList[screenIndex].text }}正序</text>
				<text class="ellipsis nav_text" v-else>排序</text>
				<image v-if="!isShowSlot" class="nav_icon_down" src="/static/icon/ic_down.png"></image>
				<image v-if="isShowSlot" class="nav_icon_down rotate" src="/static/icon/ic_down.png"></image>
			</view>

			<view class="list_show_type u-flex u-flex-b">
				<view class="type_item" @click="showType('1')" :class="type == '1' ? 'active' : ''">
					<u-icon name="grid"></u-icon>
				</view>
				<view class="type_item" @click="showType('2')" :class="type == '2' ? 'active' : ''">
					<u-icon name="list"></u-icon>
				</view>
			</view>
		</view>
		<!-- 列表 -->

		<view v-if="type == '1'">
			<view class="info_box">
				<list-item :dataList="dataList"></list-item>
				<u-loadmore :status="status" />
			</view>
		</view>
		<view v-if="type == '2'">
			<view class="table_box" :style="[{ height: height }]" :class="isShowAll ? 'rotate' : ''">
				<zb-table
					ref="zbTable"
					:show-header="true"
					:columns="column"
					:stripe="true"
					:fit="false"
					:data="data"
					:isShowLoadMore="true"
					@pullUpLoading="loadTableData"
				></zb-table>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-popup mode="bottom" v-model="isShowSlot">
			<view class="section screen">
				<view class="sel">
					<view class="u-flex u-m-b-18 u-border-bottom u-p-b-20" v-for="(item, index) in screenList" :key="index" @click="changeType(item, index)">
						<view class="">{{ item.text }}</view>
						<view class="item-text" v-show="screenIndex == index">正序</view>
					</view>
				</view>
				<view class="u-flex sel-b">
					<view class="btn" @click="onClean()">清空</view>
					<view class="btn active" @click="onSubmit()">确定</view>
				</view>
			</view>
		</u-popup>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
import ListItem from './list-item.vue';
var _self;
export default {
	components: {
		ListItem
	},
	data() {
		return {
			scrollTop: 0,
			show: true,
			height: '400px',
			isScreen: false,
			isShowSlot: false,
			sectionTop: 0,
			type: '1',
			isShowAll: false,
			pageNo: 1,
			screenList: [
				{ text: '一次瞬时流量', value: 'instantaneous_flow' },
				{ text: '一次瞬时热量', value: 'instantaneous_heat' },
				{ text: '一次供水温度', value: 'supply_temp' },
				{ text: '二次供水温度', value: 'supply_temp_t' },
				{ text: '一次回水温度', value: 'back_temp' },
				{ text: '二次回水温度', value: 'back_temp_t' },
				{ text: '一次供水压力', value: 'supply_pre' },
				{ text: '二次供水压力', value: 'supply_pre_t' },
				{ text: '一次回水压力', value: 'back_pre' },
				{ text: '二次回水压力', value: 'back_pre_t' },
				{ text: '阀门开度', value: 'value_opening' }
			],
			screenIndex: null,
			column: [
				{ name: 'name', label: '名称', fixed: true, width: 150, emptyString: '--' },
				{ name: 'status', label: '状态', width: 80, filters: { 0: '正常', 2: '异常' } },
				{ name: 'instantaneous_flow', width: 120, label: '瞬时流量(m³/h)', align: 'center' },
				{ name: 'instantaneous_heat', width: 120, label: '瞬时热量(GJ/h)', align: 'center' },
				{ name: 'supply_back_temp', label: '一次供回温(°C)', width: 120, align: 'center' },
				{ name: 'supply_back_pre', label: '一次供回压(MPa)', width: 140, align: 'center' },
				{ name: 'supply_back_temp_t', label: '二次供回温(°C)', width: 120, align: 'center' },
				{ name: 'supply_back_pre_t', label: '二次供回压(MPa)', width: 140, align: 'center' },
				{ name: 'value_opening', label: '阀门开度(%)', align: 'center' },
				{ name: 'hot_area', label: '供热面积(㎡)', align: 'center' },
				{ name: 'get_time', label: '入库时间', align: 'center', width: 150, emptyString: '--' }
			],
			data: [],
			sort: '',
			dataList: [],
			navTop: 0,
			status: 'loadmore',
			historyKeywords: [],
			searchName: ''
		};
	},
	onLoad() {
		_self = this;
		// #ifdef MP-WEIXIN
		_self.navTop = '0';
		_self.sectionTop = '88rpx';
		_self.height = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(88) * 0 + 'px';
		// #endif
		// #ifndef MP-WEIXIN
		_self.navTop = uni.getSystemInfoSync().statusBarHeight + uni.upx2px(88) * 1 + 'px';
		_self.sectionTop = uni.getSystemInfoSync().statusBarHeight + uni.upx2px(88) * 2 + 'px';
		_self.height = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(88) * 1 + 'px';
		// #endif
		this.loadData();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		toLink() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		back() {
			uni.navigateBack(1);
		},
		showSlot() {
			this.isShowSlot = !this.isShowSlot;
		},
		onReset() {
			this.isScreen = false;
		},
		onClean() {
			this.isShowSlot = false;
			this.screenIndex = null;
			this.sort = '';
			this.pageNo = 1;
			if (this.type == '1') {
				this.loadData();
			} else {
				this.loadTableData();
			}
		},
		onSubmit() {
			this.isShowSlot = false;
			this.pageNo = 1;
			if (this.type == '1') {
				this.loadData();
			} else {
				this.loadTableData();
			}
		},
		showType(data) {
			this.type = data;
			this.pageNo = 1;
			if (this.type == '1') {
				this.loadData();
			} else {
				this.loadTableData();
			}
		},
		changeType(item, index) {
			this.screenIndex = index;
			this.sort = item.value;
		},
		loadData() {
			this.status = 'loading';
			this.$http
				.post(
					'hot_crew/lists',
					{
						pageNo: this.pageNo,
						pageSize: 20,
						name: this.searchName,
						sort_order: this.sort,
						exchange_ids: this.$store.state.userInfo.exchange_ids,
						token: this.$store.state.userInfo.token
					},
					{
						load: false
					}
				)
				.then((res) => {
					if (res.data.length < 20) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					if (this.pageNo == 1) {
						this.dataList = res.data;
					} else {
						this.dataList = this.dataList.concat(res.data);
					}
					this.pageNo = this.pageNo + 1;
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.status = 'loadmore';
				});
		},
		loadTableData() {
			let that = this;
			that.$http
				.post(
					'hot_crew/lists',
					{
						pageNo: that.pageNo,
						name: this.searchName,
						pageSize: 30,
						exchange_ids: that.$store.state.userInfo.exchange_ids,
						sort_order: that.sort,
						token: that.$store.state.userInfo.token
					},
					{
						load: false
					}
				)
				.then((res) => {
					that.$refs.zbTable.pullUpCompleteLoading('ok');
					let arr = [];
					if (res.data.length != 0) {
						arr = res.data.map((item) => {
							let params = Object.assign({}, item, item.crewdata);
							params.supply_back_temp = params.supply_temp + '/' + params.back_temp;
							params.supply_back_temp_t = params.supply_temp_t + '/' + params.back_temp_t;
							params.supply_back_pre = params.supply_pre + '/' + params.back_pre;
							params.supply_back_pre_t = params.supply_pre_t + '/' + params.back_pre_t;
							return params;
						});
					}
					if (that.pageNo == 1) {
						that.data = arr;
					} else {
						that.data = that.data.concat(arr);
					}
					that.pageNo = that.pageNo + 1;
				})
				.catch(() => {});
		},
		onReachBottom() {
			if (this.status == 'loadmore') {
				this.loadData();
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ededed;
}
.icon_setUp {
	margin-left: 20rpx;
}
.search_box {
	margin-right: 24rpx;
}
.nav {
	position: fixed;
	/* #ifdef MP-WEIXIN */
	top: 176rpx;
	/* #endif */
	/* #ifdef H5 */
	top: 88rpx;
	/* #endif */
	z-index: 100000;
	background-color: $uni-text-color-inverse;
	width: 100%;
	height: 88rpx;
	font-size: $uni-font-size-base;
	.nav_icon_map {
		width: 30rpx;
		height: 28rpx;
	}
	.nav_icon_down {
		width: 24rpx;
		height: 12rpx;
		margin-left: 8rpx;
	}
	.nav_icon_down.rotate {
		transform: rotate(180deg);
	}
	.nav-cell {
		justify-content: center;
		padding: 0 40rpx;
		height: 32rpx;
		// border-right: 1px #ccc solid;
	}
	.nav-cell:nth-child(2),
	.nav-cell:nth-child(3) {
		padding: 0;
	}
	.nav-cell:first-child .nav_text {
		padding-left: 10rpx;
		padding-right: 0;
	}
	.nav-cell:last-child {
		border: 0;
	}
	.nav_text {
		padding-right: 10rpx;
	}
	.nav-cell.active .nav_text {
		color: #2796f2;
	}
}
.section {
	width: 750rpx;
	// position: fixed;
	z-index: 9999999;
	overflow: hidden;
	padding-top: 88rpx;
	// top: 262rpx;
}
.info_box {
	padding-top: 88rpx;
}
.table_box {
	padding-top: 87rpx;
}
.table_box.rotate {
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: 0% 0%; /*1.重置旋转中心*/

	-moz-transform: rotate(90deg);
	-moz-transform-origin: 0% 0%;

	-ms-transform: rotate(90deg);
	-ms-transform-origin: 0% 0%;

	transform: rotate(90deg);
	transform-origin: 0% 0%;

	width: 100vh; /*2.利用 vh 重置 ‘宽度’ */
	height: 100vw; /* 3.利用 vw 重置 ‘高度’ */
	position: absolute;
	top: 0;
	left: 100vw; /* 4.旋转后页面超出屏幕，重置页面定位位置 */
}
.screen {
	background-color: rgba(0, 0, 0, 0.6);
	.sel {
		padding: 35rpx 32rpx;
		background-color: $uni-text-color-inverse;
		.u-flex {
			// width: 100%;
			justify-content: space-between;
			.item-text {
				color: #2796f2;
			}
		}
	}
	.sel-b {
		padding: 8rpx 32rpx 32rpx 32rpx;
		border-top: 1px #eaeaea solid;
		background-color: $uni-text-color-inverse;

		.btn {
			width: 400rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #f7f7f7;
			color: #333;
			border-radius: 10rpx;
			font-size: $uni-font-size-base;
			text-align: center;
			margin-right: 35rpx;
			margin-top: 24rpx;
		}
		.btn:active {
			background-color: rgba(0, 0, 0, 0.1);
		}
		.btn:last-child {
			margin-right: 0;
		}
		.btn.active {
			background-color: #2796f2;
			color: #fff;
		}
	}
}
.sel-item {
	flex-wrap: wrap;
}
.list_show_type {
	position: absolute;
	background-color: #eeeeee;
	width: 120rpx;
	height: 60rpx;
	right: 20rpx;
	border: 1rpx solid #eeeeee;
	border-radius: 6rpx;
	padding: 5rpx;
	.type_item {
		width: 55rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
	}
	.type_item.active {
		background-color: #ffffff;
	}
}
</style>
